<template>
  <div class="container mx-auto">

      <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
      
             <!-- pc端才会出现左侧小菜单 -->
      <SlideMenuSmall class="hidden md:block"  v-if="slideTpye == 'small'"  />
       <!-- pc web端 拉出左侧菜单 -->
       <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
 
  <div :class="pl" class="  pt-16  min-h-screen w-full"  >
     
  <!--
  This example requires Tailwind CSS v2.0+ 
  
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
 
  

    <main class=" w-full">
     

      <section aria-labelledby="products-heading" class="pt-6 pb-24">
        <h2 id="products-heading" class="sr-only">Community</h2>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-8 gap-y-10 ">
          <!-- Filters -->
          <div class="p-3">
           <Userleft   />
          </div>

          <!-- topics grid -->
          <div class="lg:col-span-3">
             
            <!-- Replace with your content -->
               <div class=" text-gray-300  ">  
                <h2  class="border-b border-gray-600  p-3 text-gray-200">My  Notifications</h2>
                 
                 <div class="p-10 text-center text-gray-200" v-if="list.length==0">
                     {{showNothing?' You have no new notifications':'Loading...'}}
                 </div>
                 <div  v-if="list.length>0">
                       <a  class="card  border-b border-gray-600 " style="border-radius: 0;" v-for="(item,k) in list" v-bind:key="k" :href="item.path" :class="item.readClass"><div class="flex-row items-center space-x-4 card-body  p-4"><div>
                         <a :href="'/uid/'+item.user.uid" class="avatar" v-if="item.user.picture"><div class="rounded-full w-10 h-10 shadow" ><img  :src="item.user.picture"></div></a>
                          <a :href="'/uid/'+item.user.uid" class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-10 h-10" :style="'background-color:'+ item.user['icon:bgColor']"><span>{{item.user['icon:text']}}</span></div></a> 
                          </div> <div ><h2 v-html="item.html"></h2> <p class=" text-gray-400">{{item.datetime}}</p></div></div>
                        </a>
                  </div>
              </div> 
 
            <!-- /End replace -->
          </div>
          <!-- recommend topics grid -->
         
        </div>
      </section>
    </main>
  
 

</div>
</div>
</template>


<script>
import Userleft from '../../components/Userleft.vue';
const timeago = require('../../lib/timeago');
export default {
  components: { Userleft },
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
 
  name: 'IndexPage',
   data(){
    return { 
      slideTpye:'small',
      user:{},
      pl:"pl-0 md:pl-20",
      page:1,
      list:[],
      showNothing:false
    }
  },
   async asyncData({$axios,req,store}) {
      
      return {  }
   },
    async fetch({ store, params }) {
      
   },
   async created(){
      this.getNoti();
   },
  methods: {
   async getNoti(){
        //  this.$axios.post("register/abort")
        let res = await this.$axios.get("api/notifications");
        if(res.data.notifications && res.data.notifications.length>0){
          let notifications = res.data.notifications.map(x=>{
             x.html = this.translator(x.bodyShort);
             x.datetime = timeago(x.datetimeISO )
             return x;
          })
          // //console.log("notifications:",notifications)
          this.list = this.list.concat(notifications);
          // //console.log(" this.list:", this.list)
        }
         if(this.list.length==0){
          this.showNothing=true;
        }
        // //console.log(res);
    },
    translator(x){
        var l = {"title":"Notifications","no_notifs":"You have no new notifications","see_all":"See all notifications","mark_all_read":"Mark all notifications read","back_to_home":"Back to %1","outgoing_link":"Outgoing Link","outgoing_link_message":"You are now leaving %1","continue_to":"Continue to %1","return_to":"Return to %1","new_notification":"You have a new notification","you_have_unread_notifications":"You have unread notifications.","all":"All","topics":"Topics","replies":"Replies","chat":"Chats","group-chat":"Group Chats","follows":"Follows","upvote":"Upvotes","new-flags":"New Flags","my-flags":"Flags assigned to me","bans":"Bans","new_message_from":"New message from <strong>%1</strong>","upvoted_your_post_in":"<strong>%1</strong> has upvoted your post in <strong>%2</strong>.","upvoted_your_post_in_dual":"<strong>%1</strong> and <strong>%2</strong> have upvoted your post in <strong>%3</strong>.","upvoted_your_post_in_multiple":"<strong>%1</strong> and %2 others have upvoted your post in <strong>%3</strong>.","moved_your_post":"<strong>%1</strong> has moved your post to <strong>%2</strong>","moved_your_topic":"<strong>%1</strong> has moved <strong>%2</strong>","user_flagged_post_in":"<strong>%1</strong> flagged a post in <strong>%2</strong>","user_flagged_post_in_dual":"<strong>%1</strong> and <strong>%2</strong> flagged a post in <strong>%3</strong>","user_flagged_post_in_multiple":"<strong>%1</strong> and %2 others flagged a post in <strong>%3</strong>","user_flagged_user":"<strong>%1</strong> flagged a user profile (%2)","user_flagged_user_dual":"<strong>%1</strong> and <strong>%2</strong> flagged a user profile (%3)","user_flagged_user_multiple":"<strong>%1</strong> and %2 others flagged a user profile (%3)","user_posted_to":"<strong>%1</strong> has posted a reply to: <strong>%2</strong>","user_posted_to_dual":"<strong>%1</strong> and <strong>%2</strong> have posted replies to: <strong>%3</strong>","user_posted_to_multiple":"<strong>%1</strong> and %2 others have posted replies to: <strong>%3</strong>","user_posted_topic":"<strong>%1</strong> has posted a new topic: <strong>%2</strong>","user_edited_post":"<strong>%1</strong> has edited a post in <strong>%2</strong>","user_started_following_you":"<strong>%1</strong> started following you.","user_started_following_you_dual":"<strong>%1</strong> and <strong>%2</strong> started following you.","user_started_following_you_multiple":"<strong>%1</strong> and %2 others started following you.","new_register":"<strong>%1</strong> sent a registration request.","new_register_multiple":"There are <strong>%1</strong> registration requests awaiting review.","flag_assigned_to_you":"<strong>Flag %1</strong> has been assigned to you","post_awaiting_review":"Post awaiting review","profile-exported":"<strong>%1</strong> profile exported, click to download","posts-exported":"<strong>%1</strong> posts exported, click to download","uploads-exported":"<strong>%1</strong> uploads exported, click to download","users-csv-exported":"Users csv exported, click to download","post-queue-accepted":"Your queued post has been accepted. Click here to see your post.","post-queue-rejected":"Your queued post has been rejected.","email-confirmed":"Email Confirmed","email-confirmed-message":"Thank you for validating your email. Your account is now fully activated.","email-confirm-error-message":"There was a problem validating your email address. Perhaps the code was invalid or has expired.","email-confirm-sent":"Confirmation email sent.","none":"None","notification_only":"Notification Only","email_only":"Email Only","notification_and_email":"Notification & Email","notificationType_upvote":"When someone upvotes your post","notificationType_new-topic":"When someone you follow posts a topic","notificationType_new-reply":"When a new reply is posted in a topic you are watching","notificationType_post-edit":"When a post is edited in a topic you are watching","notificationType_follow":"When someone starts following you","notificationType_new-chat":"When you receive a chat message","notificationType_new-group-chat":"When you receive a group chat message","notificationType_group-invite":"When you receive a group invite","notificationType_group-leave":"When a user leaves your group","notificationType_group-request-membership":"When someone requests to join a group you own","notificationType_new-register":"When someone gets added to registration queue","notificationType_post-queue":"When a new post is queued","notificationType_new-post-flag":"When a post is flagged","notificationType_new-user-flag":"When a user is flagged","mentions":"Mentions","user_mentioned_you_in":"<strong>%1</strong> mentioned you in <strong>%2</strong>","user_mentioned_group_in":"<strong>%1</strong> mentioned <strong>%2</strong> in <strong>%3</strong>","notificationType_mention":"When someone mentions you"}
         x = x.replaceAll("[[","")
         x = x.replaceAll("]]","")
         x = x.replaceAll("notifications:","")
        let p = x.split(",");
        let str = l[p[0]];
        str = str.replaceAll("%1",p[1])
        str = str.replaceAll("%2",p[2])
        return str;
         
   },
    // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0 md:pl-20";
        }
     }
   }
   
 
     

}
</script>
